<!doctype html>
<html class="no-js fixed-layout" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head th:include="include/admin/header::html"></head>
<body>

    <!--引入共有头部-->
    <div th:replace="include/top::header"></div>

    <!--页面主体内容-->
    <div class="am-cf admin-main" style="padding-top: 0">

        <!--引入共有左侧-->
        <div th:replace="include/admin/left::html"></div>

        <!--右侧-->
        <div class="admin-content" id="app">
            <div class="superAdminInfo">
                <div class="superFunction" id="articleCategories">
                    <div class="subject">
                        <div class="articleCategoriesManagement">
                            <ol class="am-breadcrumb  am-breadcrumb-slash navigationBar">
                                <li class="am-active am-icon-home"> 后台管理</li>
                                <li class="am-active">分类管理</li>
                            </ol>
                            <div class="categoryContent am-animation-slide-right">
                                <div class="contentTop">
                                    目前分类数: <span class="categoryNum">{{countAll}}</span> <span class="am-icon-angle-double-right"></span>
                                    <a href="/admin_article">文章数: <span class="categoryNum">{{countArticle}}</span></a>
                                    <div class="updateCategory">
                                        <a class="addCategory" id="add-category"><i class="am-icon-plus-square"></i> 添加分类</a>
                                    </div>
                                    <div th:replace="include/alert::html"></div>

                                    <table class="categories">
                                        <tbody>
                                        <tr v-for="(category,i) in beans">
                                            <td><a :href="'/categories?cid='+category.id+'&name='+category.name+'&start=0'" target="_blank"><span style="font-size: 16px;">{{category.name}} </span></a></td>
                                            <td><div class="am-progress am-progress-striped am-progress-sm am-active admin-categories-bar">
                                                    <div class="am-progress-bar am-progress-bar-secondary" v-if="(i+1)%2==1" :style="{width:percent(category.articleCount) + '%'}"></div>
                                                    <div class="am-progress-bar am-progress-bar-success" v-else :style="{width:percent(category.articleCount) + '%'}"></div>
                                                </div>
                                                <span> {{category.articleCount}} / {{percent(category.articleCount)}}%</span>
                                            </td>
                                            <td><a class="am-icon-remove" @click="deleteBean(category.id, category.articleCount)" style="margin-left: 20px;"></a></td>
                                        </tr>
                                        </tbody>
                                    </table>

                                    <div th:replace="include/page::html"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--引入共有脚部-->
            <div th:replace="include/admin/footer::html"></div>
        </div>
    </div>

    <div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">添加分类</div>
            <div class="am-modal-bd">
                分类名称
                <input type="text" class="am-modal-prompt-input" id="name">
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>提交</span>
            </div>
        </div>
    </div>

    <!--手机适配显示左侧按钮-->
    <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<script src="js/all.js"></script>
<script src="js/plugs_paging.js"></script>
<script src="js/admin/admin_category.js"></script>

</body>
</html>
